<template>
    <div class="header">
        <div class="logo">
            <div class="logo-img">
                <el-image class="imgi" :crossorigin="null" :src="logoUrl" fit="scale-down" />
            </div>
            <div class="logo-content">
                <div class="top-font">
                    <span>飞鸟物流</span>
                </div>
                <div class="bottom-font">
                    <span>fly-express</span>
                </div>
            </div>
        </div>
        <div class="top-wrapper">
            <el-menu :default-active="$route.path" class="nav" mode="horizontal" background-color="none"
                text-color="white" router active-text-color="none">
                <el-menu-item index="/home">主页</el-menu-item>
                <el-menu-item index="/ship/send/normal">在线下单</el-menu-item>
                <el-menu-item index="/courierInfo">个人中心</el-menu-item>
                <el-menu-item index="/about">关于我们</el-menu-item>
            </el-menu>
        </div>
        <div class="online-help">
            <el-button class="btn" type="info">在线咨询</el-button>
        </div>

    </div>
</template>

<script setup lang="ts">
import {logoUrl} from '@/common/common'

</script>

<style scoped lang="less">
.header {
    display: flex;
    height: 100%;
    background-image: linear-gradient(to right, #5e88df, #86ade0);
    width: 97%;
    margin: 0 auto;
    align-items: center;
    .logo {
        flex: 1.5;

        display: flex;
        justify-content: center;
        align-items: center;

        .logo-img {
            flex: 1;
            height: 90%;

            .imgi {
                height: 100%;
                border-radius: 50%;
            }
        }

        .logo-content {
            flex: 3;
            height: 90%;

            display: flex;
            flex-direction: column;

            .top-font {
                flex: 2;

                display: flex;
                justify-content: flex-start;
                align-items: flex-end;

                span {
                    font-size: 1rem;
                    font-weight: 700;
                }
            }

            .bottom-font {
                flex: 1.4;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                span {
                    font-size: 0.7rem;
                    color: rgb(233, 211, 211);
                }
            }
        }

    }

    .top-wrapper {
        flex: 5.5;
       
        :deep(.el-menu--horizontal) {
            display: flex !important;
            justify-content: center;
            align-items: center !important;;
            padding-right:8.5rem;
            border-bottom: none !important;
            --el-menu-hover-bg-color: rgb(220, 202, 202) !important;
        }
    }

    .online-help {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-button.btn {
            background-image: linear-gradient(to right, #fc7841, #f9c328) !important;
            font-size: 0.8rem !important;
        }


    }
}
</style>